<%@page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="root61">
<head>
	<%@include file="/views/common/include/taglib.jsp"%>
	<%@include file="/views/common/include/head.jsp"%>
	<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/sectionparent.css" source="widget" />
	<link type="text/css" rel="stylesheet" href="${ctx }/css/dlifestyle/admin.css" source="widget" />
</head>
	<style type="text/css">
		#tableTbody tr:nth-of-type(odd){
			background-color:#FDFBFB;
		}
		#tableTbody tr:nth-of-type(even){
			background-color:white;
		}
	</style>
<body>
<section class="mainborder">
   <section class="edit_scrollable padder">
	<div class="edit_content" style="min-height: 0px;">
    	<div id="myFrom">
        <div class="form" style="min-height: 0px;">
            <div style="padding: 0 0;overflow-y: auto;overflow-x: hidden;">
            	<div class="table_boder">
	              <table style="width:100%;">
					<tbody id="tableTbody">
						<tr >
							<td width="20%" style="text-align: right;background-color: #d9e8ec;height:50px;padding-right: 10px;">${user.username}:</td>
							<td width="80%" align="left" style="text-align: left;">	
								<c:forEach items="${roles}" var="item" varStatus="rStatus">
								<span style="width: 40%;display:inline-block;">
								<input id="checked" type="hidden" value="${item.id}">
								<input id="roleLen" type="hidden" value="${fn:length(roles)}">
								<input type="checkbox" style="vertical-align:middle;cursor: pointer;" onclick="checkRu('${item.id}',this);" id="rStatus${item.id}"/>
								<span style="padding-right:10px;display:inline-block">
									<c:if test="${fn:length(uRoles) >0}">
										<c:forEach items="${uRoles}" var="uRole" varStatus="uStatus">
											<c:if test="${item.id == uRole.roleId }">
												<input id="length" type="hidden" value="${fn:length(uRoles)}">
												<input id="userRole${uStatus.index }" type="hidden" value="${uRole.roleId}">
												<script type="text/javascript">
													var item;
													var len = $("#length").val();
													for(var i=0;i < len;i++){
													    item = $("#userRole"+ i).val();
														$("#rStatus" + item).attr("checked","checked");
													}
												</script>
											</c:if>
										</c:forEach>
									</c:if>
									<font style="vertical-align:middle;">${item.roleName}</font>
								</span></span>
								</c:forEach>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
            </div>
        </div>

    </div>
</div>
</section>
</section>
</body>
	<script src="${ctx}/js/controllers/system/user/UserRoleController.js" type="text/javascript"></script>
	<script type="text/javascript">
		var ctx = '${ctx}';
		setCtx(ctx);
		
	</script>
</html>